<template>
    <div class="echarts" ref="echarts" :style="{ minHeight: '100px' }">
    </div>
</template>
<script>
export default {
    name: 'Bar',
    props: {
        // 类型
        type: {
            type: String,
            default: () => ''
        },
        /** 包含
         *  markLine：{
         *  label:'',// 名称
         *  value:'',// 固定值
         * }
         * 
        */
        // 一些配置项
        setting: {
            type: Object,
            default: () => { }
        },
        // 数据
        data: {
            type: [Object, Array],
            default: () => [],
        },
    },
    data() {
        return {
            timesName: null
        }
    },
    // created() {
    // },
    methods: {
        echartInit() {
            var myChart = this.$echarts.init(this.$refs.echarts);
            let type = this.type;
            var option = {
                // 图例位置
                legend: {},
                tooltip: {
                    // formatter: function (params) {
                    //     var color = params.color.colorStops[0].color;
                    //     var res = `<div "><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span> ${params.name}<span style="color:#FB7224;margin-left:6px;">${params.value}</span></div>`;
                    //     return res;
                    // }
                },
                // 图像大小
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '-4%',
                    top: '4%',
                    containLabel: true,
                },
                textStyle: {
                    color: "#ffffff"
                },
                xAxis: {
                    axisLabel: {
                        color: '#C5C0BF',
                        fontSize: '9',
                        lineHeight: 12,
                        interval: 0,
                        formatter: function (value) {
                            let str = value;
                            let result = '';
                            // 如果文本长度超过{num}，则在第{num}个字符后面换行
                            let num = 5;
                            for (let i = 0; i < str.length; i += num) {
                                result += str.substr(i, num) + '\n';
                            }
                            return result;
                        }
                    },
                },
                yAxis: {
                    axisLabel: {
                        color: '#C5C0BF',
                        fontSize: '8'
                    },
                },
                series: [{
                    name: '',
                    type: 'bar',
                    // 图形颜色
                    itemStyle: {
                        color: 'rgba(15,128,198,1)',
                    },
                    label: {
                        show: true,
                        position: 'top',
                        color: '#ffffff'
                    },
                    barMaxWidth: '30%',
                    barCategoryGap: '60%',
                    data: [],
                }]
            };
            if (this.setting && Object.keys(this.setting).length > 0) {
                if (this.setting.color) {
                    if (typeof (this.setting.color) == 'string') {
                        option.series[0]['itemStyle']['color'] = this.setting.color;
                    }
                    else if (Array.isArray(this.setting.color)) {
                        option.series[0]['itemStyle']['color'] = {
                            type: 'linear',
                            x: 0, //右
                            y: 0, //下
                            x2: 0, //左
                            y2: 1, //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: this.setting.color[0],
                                },
                                {
                                    offset: 1,
                                    color: this.setting.color[1],
                                }
                            ]
                        }
                    }
                }
                if (this.setting.grid) {
                    option['grid'] = {
                        ...option['grid'],
                        ...this.setting.grid,
                    }
                }
            }
            // 对齐线换为虚线
            let splitLine = {
                lineStyle: {
                    type: 'dashed',
                    color: '#FFFFFF00'
                },
                show: true,
            }
            if (type == 'bar') {
                // 普通柱形图
                option['yAxis'] = {
                    ...option['yAxis'],
                    type: 'value',
                    splitLine: splitLine,
                }

                option['xAxis'] = {
                    ...option['xAxis'],
                    data: this.getSplitData.label,
                }
                let dataList = this.getSplitData.value;
                option['series'][0]['data'] = dataList;
            }
            // 判断有没有辅助线
            // if (this.setting && Array.isArray(this.setting.markLine) && this.setting.markLine.length > 0) {
            //     let markLineArr = markLineF(this.setting.markLine);
            //     option.series[0].markLine.data = markLineArr;
            // }
            myChart.setOption(option);
        },
        // 重新计算
        onResizeChange() {
            var myChart = this.$echarts.init(this.$refs.echarts);
            myChart.resize();
        },
    },
    mounted() {
        // 解决页面不聚焦的时候柱形图丢失问题
        this.timesName = setInterval(() => {
            this.echartInit();
        }, 2000)
    },
    watch: {
        data(newVal, oldVal) {
            // 当 parentData 变化时，这个函数会被调用
            this.echartInit();
        }
    },
    computed: {
        // data里面包含 label value
        getSplitData() {
            let arr = {
                label: [],
                value: [],
            };
            this.data.filter((val, index) => {
                arr['label'].push(val.label || val.name);
                arr['value'].push(val.value || val.num);
            })
            return arr
        },
    },
    // 销毁
    beforeDestroy() {
        clearInterval(this.timesName);
        this.timesName = null;
    }
}
</script>
<style lang="less" scoped>
.echarts {
    width: 100%;
    height: 100%;
}
</style>